<template>
  <a-layout id="manage-basic-layout">
    <a-layout-header
      class="manage-layout-header"
      :style="{
        background: 'white',
        padding: 0,
      }"
    >
      <ManageHeader />
    </a-layout-header>

    <a-layout
      :style="{
        display: 'flex',
        width: '100%',
        alignItems: 'center',
        paddingTop: '24px',
      }"
    >
      <a-layout
        :style="{
          width: '1392px',
        }"
        class="manage-layout-vh"
      >
        <a-layout-sider
          width="340"
          :style="{
            background: '#f0f2f5',
          }"
        >
          <ManageSider />
        </a-layout-sider>

        <a-layout-content
          :style="{
            background: '#f0f2f5',
            margin: 0,
            minHeight: '280px',
            maxHeight: '100vh',
            overflowX: 'auto',
          }"
        >
          <router-view />
        </a-layout-content>
      </a-layout>

      <a-layout-footer>
        <ManageFotter
          :style="{
            padding: 0,
          }"
        />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ManageHeader from './ManageHeader.vue';
import ManageFotter from './ManageFotter.vue';
import ManageSider from './ManageSider.vue';
export default defineComponent({
  components: { ManageHeader, ManageFotter, ManageSider },
  setup() {
    return {};
  },
});
</script>
<style lang="less" scoped>
.manage-basic-layout {
  height: 100vh;
}
.manage-layout-vh {
  height: calc(100vh - 196px);
}
</style>
